<template>
  <div class="CarouSelCard">
    <el-card>
      <el-form :model="cardForm" :rules="cardForm.event == 'none' ? rules : rules1" label-width="100px" label-position="left">
        <el-col :span="6">
          <sku-img v-model="cardForm.url" />
        </el-col>
        <el-col :span="18">
          <el-form-item prop="name" label="标题">
            <el-col :span="22">
              <el-input v-model="cardForm.name" placeholder="请输入标题" />
            </el-col>
          </el-form-item>
          <el-form-item prop="event" label="点击事件">
            <el-col :span="22">
              <el-radio-group v-model="cardForm.event" @change="changeEvent">
                <el-radio label="none">无点击事件</el-radio>
                <el-radio label="page">跳转小程序页</el-radio>
                <el-radio label="web">跳转Web网页</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item v-if="cardForm.event == 'page' || cardForm.event == 'web'" prop="link" label="跳转链接">
            <el-col :span="22">
              <el-input v-model="cardForm.link" placeholder="请输入跳转链接" />
            </el-col>
          </el-form-item>
          <el-form-item prop="cityType" label="显示城市">
            <el-col :span="20">
              <el-col :span="24">
                <el-radio-group v-model="cardForm.cityType">
                  <el-radio label="0">全部城市</el-radio>
                  <el-radio label="1">部分城市</el-radio>
                </el-radio-group>
              </el-col>
              <el-col v-if="cardForm.cityType =='1'" :span="24">
                <p>{{ showCity }} <el-button type="text" @click="showCityDialog">查看更多</el-button></p>
              </el-col>
            </el-col>

          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-dialog
      :modal="false"
      title="选择城市"
      :visible.sync="dialogVisible"
      width="1332.09px"
      :before-close="handleClose"
    >
      <div class="city-content">
        <div class="city-left">
          <div class="province-left">
            <el-radio-group v-model="province" style="height: 600px;overflow: auto;background: #F5F7FA" fill="#fff" @change="changeProvince">
              <el-col v-for="(item,i) in allProvince" :key="i" :span="24" style="text-align: center">
                <el-radio-button :label="item.province.code" size="medium">{{ item.province.name }}</el-radio-button>
              </el-col>
            </el-radio-group>
          </div>
          <div class="citys-right">
            <el-table :data="cityList" :header-cell-style="headerStyle" height="600">
              <el-table-column
                prop="name"
                label="城市"
                width="200px"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.city == '市辖区'">{{ scope.row.province }}</span>
                  <span v-else>{{ scope.row.city }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button v-if="!scope.row.isSelected" type="text" @click="addNewList(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="changeLogo">
          <span class="el-icon-sort" style="transform:rotate(90deg);font-size: 50px" />
        </div>
        <div class="city-right">
          <div class="select-left">
            <h3>新增的城市</h3>
            <el-table :data="newAddList" height="543" :header-cell-style="headerStyle">
              <el-table-column
                prop="name"
                label="城市"
                width="200px"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.city }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link type="danger" @click="removeNewAddList(scope.row)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="select-right">
            <h3>已添加的城市</h3>
            <el-table :data="addedList" height="543" :header-cell-style="headerStyle">
              <el-table-column
                prop="name"
                label="城市"
                width="200px"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.city }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link type="danger" @click="removeOldList(scope.row)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="margin: 0 auto;text-align: center">
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SkuImg from '@/components/SkuImg'

export default {
  name: 'CarouSelCard',
  components: { SkuImg },
  props: {
    cardForm: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      id: null,
      showCity: null,
      /** dialog*/
      dialogVisible: false,
      province: '',
      provinceName: '',
      allProvince: [],
      cityList: [],
      newAddList: [],
      addedList: [],
      rules: {
        event: [{ required: true, message: '请选择点击事件', trigger: 'blur' }],
        name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        cityType: [{ required: true, message: '请选择显示城市类型', trigger: 'change' }]
      },
      rules1: {
        event: [{ required: true, message: '请选择点击事件', trigger: 'blur' }],
        link: [{ required: true, message: '请输入跳转链接', trigger: 'blur' }],
        name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        cityType: [{ required: true, message: '请选择显示城市类型', trigger: 'change' }]
      }
    }
  },
  watch: {
    'cardForm.cityType': {
      handler(newValue, oldValue) {
        if (this.cardForm.cityType == '0') {
          this.cardForm['citys'] = []
        }
      },
      deep: true,
      immediate: true
    },
    'cardForm.id': {
      handler(newValue, oldValue) {
        if (this.cardForm.id) {
          this.id = this.cardForm.id
          if (this.cardForm.cityType == '1' && this.cardForm.citys) {
            this.setAddedList(this.cardForm.citys)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeEvent() {
      this.$forceUpdate()
    },
    showCityDialog() {
      this.dialogVisible = true
      this.province = null
      console.log(this.allProvince)
    },
    setAllProvince(allProvince) {
      this.allProvince = allProvince
      /* console.log(this.allProvince)*/
    },
    setAddedList(list) {
      this.addedList = list
      const showCity = []
      if (list.length <= 7) {
        list.forEach(inf => {
          showCity.push(inf.city)
        })
      } else {
        for (let i = 0; i < 7; i++) {
          showCity.push(list[i].city)
        }
      }
      if (showCity.length > 0) {
        this.showCity = showCity.toString()
      }
    },
    removeNewAddList(row) {
      this.newAddList.forEach((item, index) => {
        if (item.cityId == row.cityId) {
          this.newAddList.splice(index, 1)
        }
      })
    },
    removeOldList(row) {
      this.addedList.forEach((item, index) => {
        if (item.cityId == row.cityId) {
          this.addedList.splice(index, 1)
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      const citys = []
      if (this.addedList.length > 0) {
        this.addedList.forEach(info => {
          citys.push(info)
        })
      }
      if (this.newAddList.length > 0) {
        this.newAddList.forEach(inf => {
          citys.push(inf)
        })
      }
      console.log(citys)
      this.cardForm['citys'] = citys
      const showCity = []
      if (citys.length <= 7) {
        citys.forEach(inf => {
          showCity.push(inf.city)
        })
      } else {
        for (let i = 0; i < 7; i++) {
          showCity.push(citys[i].city)
        }
      }
      console.log(showCity)
      if (showCity.length > 0) {
        this.showCity = showCity.toString()
      }
    },
    changeProvince(val) {
      const citys = []
      if (this.addedList.length > 0) {
        this.addedList.forEach(info => {
          citys.push(info)
        })
      }
      if (this.newAddList.length > 0) {
        this.newAddList.forEach(inf => {
          citys.push(inf)
        })
      }
      if (citys.length > 0) {
        this.allProvince.forEach(item => {
          if (this.province == item.province.code) {
            this.cityList = []
            item.cityRegion.forEach(inf => {
              const data = {
                provinceId: item.province.code,
                province: item.province.name,
                cityId: inf.city.code,
                city: inf.city.name,
                isSelected: false
              }
              citys.forEach(info => {
                if (info.cityId == inf.city.code) {
                  data.isSelected = true
                }
              })
              this.cityList.push(data)
            })
            this.provinceName = item.province.name
          }
        })
      } else {
        this.allProvince.forEach(item => {
          if (this.province == item.province.code) {
            this.cityList = []
            item.cityRegion.forEach(inf => {
              const data = {
                provinceId: item.province.code,
                province: item.province.name,
                cityId: inf.city.code,
                city: inf.city.name,
                isSelected: false
              }
              this.cityList.push(data)
            })
          }
        })
      }
    },
    addNewList(row) {
      row.isSelected = true
      const data = {
        provinceId: row.provinceId,
        province: row.province,
        cityId: row.cityId,
        city: row.city
      }
      if (row.city == '市辖区') {
        data.city = row.province
      }
      this.newAddList.push(data)
    },
    isSelectCity(code) {
      const citys = []
      if (this.addedList.length > 0) {
        this.addedList.forEach(info => {
          citys.push(info)
        })
      }
      if (this.newAddList.length > 0) {
        this.newAddList.forEach(inf => {
          citys.push(inf)
        })
      }
      citys.forEach(item => {
        if (item.cityId == code) {
          this.isSelected = true
        } else {
          this.isSelected = false
        }
      })
    },
    getData() {
      const count = this.index + 1

      if (this.cardForm.event != 'none' && (!this.cardForm.link || this.cardForm.link.trim().length <= 0)) {
        this.$message.error('第' + count + '个轮播图的跳转链接未输入')
        return
      }

      if (this.cardForm.cityType == '1' && this.cardForm.citys.length == 0) {
        this.$message.error('第' + count + '个轮播图的显示城市未添加')
        return
      }
      return this.cardForm
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.CarouSelCard {
  .el-dialog {
    .city-content {
      display: flex;
      justify-content: space-between;
      .city-left {
        width: 42%;
        padding: 10px;
        border: 1px solid #F3F3F3;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        .province-left {
          width: 190px;
          ::v-deep .el-radio-button__inner {
            border: none;
            background: #F5F7FA;
            display: block;
            width: 160px;
          }
          ::v-deep .is-active {
            .el-radio-button__inner {
              color: black;
            }
          }
        }
        .citys-right {
          width:320px;
        }
      }
      .changeLogo {
        width: 5%;
        line-height: 622px;
        text-align: center;
      }
      .city-right {
        width: 55%;
        padding: 10px;
        border: 1px solid #F3F3F3;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        .select-left {
          width: 320px;
          padding: 5px;
          border: 1px solid #F3F3F3;
          border-radius: 5px;
        }
        .select-right {
          width: 320px;
          padding: 5px;
          border: 1px solid #F3F3F3;
          border-radius: 5px;
        }
      }
    }
  }
  ::v-deep .avatar {
    width: 150px;
    height: 150px;
  }
  ::v-deep .avatar-uploader-icon {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
}
</style>
